<template>
    <view class="publish-container">

        <nav-bar :bgColor="['#e62321','#ea4929']" fontColor="#FFF" title="发布"></nav-bar>

        <view class="picker-container">
            <picker @change="bindPickerChange" :range="pickArr">
                <view class="picker">
                    当前选择：
                </view>
            </picker>
        </view>

        <view class="form-container">
            <!--<view class="form-item">
                <text class="title">基本信息</text>
                <view class="base-info">
                    <input v-model="formData.title" placeholder="请输入标题"/>
                </view>
            </view>-->
            <view class="form-item">
                <text class="title-other">轮播图列表</text>


                <view class="upload">
                    <view class="file-box" v-for="(item,index) of tableList" :key="item.id">

                        <view style="display: flex;flex-direction: column">
                            <view class="file-item" v-if="item.fileType.includes('img')">
                                <image class="file-img" mode="aspectFill" @click="previewImg(index)"
                                       :src="item.tempFilePath"/>
                                <!--<image class="del-icon" mode="widthFix" @click="handleDelForImg(index)"
                                       src="../../static/img/del_icon.png"/>-->
                                <view class="item-progress" :style="{
                                                    'opacity': Number(item.showProgress),
                                                     'background-image': `linear-gradient(to right, red ${item.progress}%, #cecece ${item.progress}%)`,}">
                                    {{ item.progress }}%
                                </view>
                            </view>
                            <view class="file-item" v-if="item.fileType.includes('video')">
                                <!--<image class="del-icon" @click="handleDel(index)" mode="widthFix" src="../../static/images/dj_ic_del@2x.png" />-->
                                <video class="file-video" controls :src="item.tempFilePath" />
                                <view class="item-progress" :style="{
                                                    'opacity': Number(item.showProgress),
                                                       'background-image': `linear-gradient(to right, red ${item.progress}%, #cecece ${item.progress}%)`,}">
                                    {{ item.progress }}%</view>
                            </view>
                            <!--<view class="set-time">
                                <text>时间间隔:</text>
                                <input v-model="imgFileLists[index].time" />
                                <text>s</text>
                            </view>-->
                        </view>

                    </view>

                </view>

                <!--<view class="add-btn" @click="uploadFileForImg">
                    <image class="btn-icon" mode="widthFix" src="../../static/img/add_icon.png"/>
                </view>-->

            </view>
            <!--<view class="form-item">
                <text class="title-other">上传视频</text>
                <view class="upload">
                    <view class="file-box" v-for="(item,index) of videoFileList" :key="item.id">

                        <view class="file-item" v-if="item.fileType.includes('video')">
                            <image class="del-icon" @click="handleDelForVideo(index)" mode="widthFix"
                                   src="../../static/img/del_icon.png"/>
                            <video class="file-video" controls :src="item.tempFilePath"/>
                            <view class="item-progress" :style="{
                'opacity': Number(item.showProgress),
                'background-image': `linear-gradient(to right, red ${item.progress}%, #cecece ${item.progress}%)`,
              }">{{ item.progress }}%
                            </view>
                        </view>

                    </view>

                    <view class="add-btn" @click="uploadFileForVideo">
                        <image class="btn-icon" mode="widthFix" src="../../static/img/add_icon.png"/>
                    </view>
                </view>
            </view>-->
        </view>

        <view class="login-btn" @click="submitBtn('img')">上传图片</view>
        <view class="login-btn" @click="submitBtn('video')">上传视频</view>

        <view class="dialog" v-if="modalShow">
            <view class="dialog_mask" @click="modalShow = false"></view>
            <view class="dialog_container">
                <view class="close-icon" @click="modalShow = false">
                    <image src="../../static/img/close.png" />
                </view>
                <view class="dialog_content">
                    <view class="dialog_content_top">{{formData.type == 'img' ? '设置图片' : '设置视频'}}</view>
                    <view class="form-content">
                        <view class="form-item">
                            <radio-group @change="bindRadioChange">
                                <label class="radio">
                                    <radio value="0" :checked="radioList[0]" style="transform:scale(0.8)" />上传                        </label>
                                <label class="radio" style="margin-left: 30rpx;">
                                    <radio value="1" :checked="radioList[1]" style="transform:scale(0.8)" />填写链接
                                </label>
                            </radio-group>
                        </view>
                        <view class="form-item" v-if="writeOrUpload == 0">
                            <text class="item-label">{{formData.type == 'img' ? '图片' : '视频'}}：</text>
                            <image v-if="!imgFileList.length && formData.type == 'img'" @click="uploadFileForImg" class="btn-icon" mode="widthFix" src="../../static/img/add_icon.png" />
                            <image v-if="!videoFileList.length && formData.type == 'video'" @click="uploadFileForVideo" class="btn-icon" mode="widthFix" src="../../static/img/add_icon.png" />

                            <view class="file-box" v-if="formData.type == 'img'" v-for="(item,index) of imgFileList" :key="item.id">
                                <view class="file-item">
                                    <image class="file-img" mode="aspectFill" @click="previewImg(index)"
                                           :src="item.tempFilePath"/>
                                    <image class="del-icon" mode="widthFix" @click="handleDelForImg(index)"
                                           src="../../static/img/del_icon.png"/>
                                    <view class="item-progress" :style="{
                                                    'opacity': Number(item.showProgress),
                                                     'background-image': `linear-gradient(to right, red ${item.progress}%, #cecece ${item.progress}%)`,}">
                                        {{ item.progress }}%
                                    </view>
                                </view>
                            </view>

                            <view class="file-box" v-if="formData.type == 'video'" v-for="(item,index) of videoFileList" :key="item.id">
                                <view class="file-item">
                                    <image class="del-icon" @click="handleDelForVideo(index)" mode="widthFix" src="../../static/images/dj_ic_del@2x.png" />
                                    <video class="file-video" controls :src="item.tempFilePath" />
                                    <view class="item-progress" :style="{
                                                    'opacity': Number(item.showProgress),
                                                       'background-image': `linear-gradient(to right, red ${item.progress}%, #cecece ${item.progress}%)`,}">
                                        {{ item.progress }}%</view>
                                </view>
                            </view>
                        </view>
                        <view class="form-item" v-if="writeOrUpload == 1">
                            <text class="item-label">图片链接：</text>
                            <input v-if="formData.type == 'img'" v-model="formData.img_url" type="text" placeholder="图片链接" />
                            <input v-else v-model="formData.video_url" type="text" placeholder="视频链接" />
                        </view>
                        <view class="form-item" v-if="formData.type == 'img'">
                            <text class="item-label">间隔时间：</text>
                            <input v-model="formData.show_time" type="number" placeholder="间隔时间" />
                        </view>
                    </view>
                    <view class="dialog_btn" @click="confirmUpload">
                        确认
                    </view>
                </view>
            </view>
        </view>

    </view>
</template>
<script>

    import navBar from '../../components/nav-bar/index'
    import {UPLOAD_IMG, UPLOAD_VIDEO} from "../../api";

    export default {
        components: {
            'nav-bar': navBar
        },
        data() {
            return {
                pickArr: [1,2,3],
                tableList: [],
                formData: {
                    device_num: '',
                    type: 'image',
                    img_id: '',
                    img_url: '',
                    video_id: '',
                    video_url: '',
                    show_time: ''
                },
                writeOrUpload: '',
                radioList: [true,false],
                device_num: '',
                imgFileList: [],
                imgFileLists: [],
                videoFileList: [],
                videoFileLists: [],
                uploadUrl: UPLOAD_IMG,
                uploadVideo: UPLOAD_VIDEO,
                modalShow: false
            }
        },
        onLoad(options) {
            this.device_num = options.device_num
            this.getBannerList()
        },
        methods: {

            bindPickerChange() {

            },

            async confirmUpload() {
                wx.showLoading({
                    title: '加载中'
                })
                try {
                    this.formData.device_num = this.device_num

                    if (this.formData.type == 'img') {
                        if (this.writeOrUpload == 0) {
                            this.formData.img_id = this.imgFileLists[0].id
                            this.formData.img_url = ''
                        } else {
                            this.formData.img_id = ''
                        }
                    }

                    if (this.formData.type == 'video') {
                        if (this.writeOrUpload == 0) {
                            this.formData.video_id = this.videoFileLists[0].id
                            this.formData.video_url = ''
                        } else {
                            this.formData.video_id = ''
                        }
                    }

                    const res = await this.$api.setBanner(this.formData);
                    if (res.data.level === 'success') {
                        this.modalShow = false
                        this.getBannerList()
                    }
                    wx.showToast({
                        title: res.data.message,
                        icon: res.data.level,
                        duration: 1500
                    })
                } catch (e) {
                    console.error(e)
                } finally {
                    wx.hideLoading()
                }

            },

            bindRadioChange(e) {
                this.writeOrUpload = e.detail.value;
            },

            async getBannerList() {
                const res = await this.$api.getBannerList({'device_num': this.device_num})
                if (res.data.level == 'success') {
                    const data = res.data.data
                    this.tableList = data.map(item => {
                        return {
                            tempFilePath: item.type == 'img' ? item.img_url : item.video_url,
                            img_id: item.id,
                            progress: 100,
                            showProgress: false,
                            fileType: item.type
                        }
                    });
                }
            },

            uploadFileForImg() {

                wx.chooseMedia({
                    count: 1,
                    mediaType: ["image"],
                    sourceType: ["album", "camera"],
                    camera: "back",
                    maxDuration: 60,
                    sizeType: [],
                    success: res => {
                        const _fileList = res.tempFiles;
                        this.imgFileList.push(..._fileList);

                        for (let item of _fileList.values()) {
                            item.fileType = res.type;
                            item.progress = 0;
                            item.showProgress = true;
                            let apiURL, params;
                            apiURL = this.uploadUrl;
                            params = "photo"

                            const uploadTask = wx.uploadFile({
                                url: this.uploadUrl,
                                filePath: item.tempFilePath,
                                name: params,
                                success: async res => {
                                    const data = JSON.parse(res.data);
                                    data.data.fileType = item.fileType;
                                    data.data.time = 0;
                                    this.imgFileLists.push(data.data);
                                },
                                fail: err => {
                                    console.log(err)
                                }
                            })
                            uploadTask.onProgressUpdate(res => {
                                item.progress = res.progress;
                                if (item.progress === 100) {
                                    item.showProgress = false;
                                }
                            })
                        }
                    },
                    fail: err => {
                        console.log(err);
                    }
                })

            },

            uploadFileForVideo() {
                wx.chooseMedia({
                    count: 1,
                    mediaType: ["video"],
                    sourceType: ["album", "camera"],
                    camera: "back",
                    maxDuration: 60,
                    sizeType: [],
                    success: res => {
                        const _fileList = res.tempFiles;
                        this.videoFileList.push(..._fileList);

                        for (let item of _fileList.values()) {
                            item.fileType = res.type;
                            item.progress = 0;
                            item.showProgress = true;
                            let apiURL, params;
                            apiURL = this.uploadVideo;
                            params = "video";

                            const uploadTask = wx.uploadFile({
                                url: this.uploadVideo,
                                filePath: item.tempFilePath,
                                name: params,
                                success: async res => {
                                    const data = JSON.parse(res.data);
                                    data.data.fileType = 'video';
                                    this.videoFileLists.push(data.data);
                                },
                                fail: err => {
                                    console.log(err)
                                }
                            })
                            uploadTask.onProgressUpdate(res => {
                                item.progress = res.progress;
                                if (item.progress === 100) {
                                    item.showProgress = false;
                                }
                            })
                        }
                    },
                    fail: err => {
                        console.log(err);
                    }
                })

            },


            // 预览图片
            previewImg(index) {
                const url = this.tableList[index].tempFilePath;
                wx.previewImage({
                    urls: [url],
                })
            },

            // 删除预览图片
            handleDelForImg(index) {
                this.imgFileList.splice(index, 1);
                this.imgFileLists.splice(index, 1);
            },

            // 删除视频
            handleDelForVideo(index) {
                this.videoFileList.splice(index, 1);
                this.videoFileLists.splice(index, 1);
            },


            async submitBtn(type) {

                this.writeOrUpload = 0

                this.formData.type = type
                this.formData.img_id = ''
                this.formData.img_url = ''
                this.formData.video_id = ''
                this.formData.video_url = ''
                this.formData.show_time = ''

                this.imgFileList = []
                this.imgFileLists = []

                this.videoFileList = []
                this.videoFileLists = []

                this.modalShow = true

                /*const imgData = this.imgFileLists.map((item, index) => {
                    return {
                        img_id: item.id,
                        time: item.time
                    }
                });
                const videoData = this.imgFileLists.map(item => {
                    return {
                        video_id: item.id,
                    }
                });

                const params = {
                    device_num: '',
                    type: '',
                    img_id: '',
                    img_url: '',
                    video_id: '',
                    video_url: '',
                    show_time: ''
                }

                const res = await this.$api.setBanner(params)
                if (res.data.level == 'success') {

                } else {

                }*/


            }

        },
    }
</script>
<style lang="scss" scoped>

    .publish-container {
        width: 100vw;
        min-height: 100vh;
        box-sizing: border-box;
        background-color: #f5f8f6;
        padding: 30rpx;
    }

    .picker-container {
        padding: 30rpx 0;
        font-size: 28rpx;
        margin-bottom: 30rpx;
    }

    .form-container {
        .form-item {
            margin-bottom: 30rpx;
            .title {
                font-weight: bold;
                font-size: 26rpx;
            }

            .title-other {
                font-weight: bold;
                font-size: 26rpx;
                border-left: 10rpx solid #e83325;
                padding-left: 20rpx;
            }

            .base-info {
                margin-top: 20rpx;
                background-color: #ffffff;
                padding: 20rpx;
            }

            .upload {
                display: flex;
                flex-wrap: wrap;
                padding: 30rpx 0;
                justify-content: space-between;

                .file-box {
                    display: flex;
                    justify-content: center;
                    width: 220rpx;
                    margin-bottom: 10rpx;

                    .file-item {
                        position: relative;
                        border-radius: 10rpx;
                    }

                    .set-time {
                        display: flex;
                        font-size: 22rpx;
                        align-items: centers;
                        padding: 20rpx;
                        text {
                            line-height: 30rpx;
                        }
                        input {
                            width: 30%;
                            border: 1px solid red;
                            min-height: 0;
                            height: 25rpx;
                            margin: 0 8rpx;
                        }
                    }

                    .del-icon {
                        position: absolute;
                        z-index: 5;
                        right: -1px;
                        top: -1px;
                        width: 30rpx;
                        height: 0;
                    }

                    .item-progress {
                        position: absolute;
                        bottom: 0;
                        left: 5%;
                        width: 90%;
                        height: 20rpx;
                        font-size: 20rpx;
                        color: #fff;
                        text-align: center;
                        line-height: 20rpx;
                        border-radius: 20rpx;
                        transition: background .5s, opacity 1s;
                    }

                    .file-img,
                    .file-video {
                        width: 200rpx;
                        height: 200rpx;
                        border-radius: 10rpx;
                    }
                }

                .hint-text {
                    padding-top: 20px;
                    font-size: 26rpx;
                    color: #888;
                }
            }
            .add-btn {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: auto;

                .btn-icon {
                    width: 200rpx;
                    height: 0;
                    margin-bottom: 10rpx;
                }

                .add-hint {
                    font-size: 26rpx;
                    color: #909399;
                }
            }
        }
    }

    .login-btn {
        width: 400rpx;
        height: 90rpx;
        background:linear-gradient(to right, #ff302f,#dc1411);
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50rpx;
        margin-left: auto;
        margin-right: auto;
        margin-top: 60rpx;
    }

    .dialog{
        .dialog_mask{
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
        }
        .dialog_container {
            background: #fff;
            width: 600rpx;
            height: 240fpx;
            position: fixed;
            top: 30%;
            left: 50%;
            border-radius: 20rpx;
            transform: translate(-50%,0);
            /*margin-left: auto;
            margin-right: auto;
            margin-top: -300rpx;*/
            padding-bottom: 20rpx;

            .close-icon {
                position: absolute;
                top: 20rpx;
                right: 20rpx;
                width: 30rpx;
                height: 30rpx;
                image {
                    width: 30rpx;
                    height: 30rpx;
                }
            }

        }
        .dialog_content {
            text-align: center;
            padding-top: 60rpx;
        }
        .dialog_btn {
            width: 70%;
            margin: 8rpx auto;
            padding: 20rpx 0;
            background:linear-gradient(to right, #ff302f,#dc1411);
            color: #ffffff;
            border-radius: 50rpx;
        }

        .form-content {
            padding: 20rpx 30rpx;
            .form-item {
                display: flex;
                align-items: center;
                border-bottom: 1px solid #e6e6e6;
                padding: 20rpx;
                .radio {
                    color: #333333;
                    font-size: 26rpx;
                }
                image {
                    width: 100rpx;
                    height: 100rpx;
                }
                .item-label {
                    color: grey;
                    width: 180rpx;
                    text-align: left;
                }
                input {
                    text-align: left !important;
                }
                .file-box {
                    display: flex;
                    justify-content: center;
                    width: 150rpx;

                    .file-item {
                        position: relative;
                        border-radius: 10rpx;
                        margin-right: 20rpx;
                    }

                    .set-time {
                        display: flex;
                        font-size: 22rpx;
                        align-items: centers;
                        padding: 20rpx;
                        text {
                            line-height: 30rpx;
                        }
                        input {
                            width: 30%;
                            border: 1px solid red;
                            min-height: 0;
                            height: 25rpx;
                            margin: 0 8rpx;
                        }
                    }

                    .del-icon {
                        position: absolute;
                        z-index: 5;
                        right: -1px;
                        top: -1px;
                        width: 30rpx;
                        height: 0;
                    }

                    .item-progress {
                        position: absolute;
                        bottom: 0;
                        left: 5%;
                        width: 90%;
                        height: 20rpx;
                        font-size: 20rpx;
                        color: #fff;
                        text-align: center;
                        line-height: 20rpx;
                        border-radius: 20rpx;
                        transition: background .5s, opacity 1s;
                    }

                    .file-img,
                    .file-video {
                        width: 120rpx;
                        height: 120rpx;
                        border-radius: 10rpx;
                    }
                }
            }
        }

    }



</style>
